<template>
  <div :class="ns.b()">
    <div :class="ns.e('page-title')">碳减排支持工具</div>

    <div :class="ns.e('filter-wrapper')">
      <div :class="ns.e('tabs')">
        <span :class="[ns.e('tab'), ns.is('active', queryData.carbonReductionTerritoryCode === tab.code)]" v-for="tab in tabs" :key="tab.code" @click="changeTab(tab.code)">{{ tab.name }}</span>
      </div>
      <div :class="ns.e('filters')">
        <vc-filter :menus="menus" />
        <div :class="ns.e('source')">
          <span>溯源</span>
          <el-switch v-model="traceSource" size="small" class="mr-2" style="--el-switch-on-color: #02C680" />
          <span :class="ns.e('total-num')">
            共计 <sapn style="color: rgba(255, 89, 89, 1)">{{ totalNum }}</sapn> 条
          </span>
      </div>
    </div>
    </div>

    <div :class="ns.e('table-wrapper')">
      <vc-table
        :loading="loading"
        :tableData="tableData"
        :columns="columns"
        :total="totalNum"
        :pageSize="queryData.pageSize"
        v-model:pageNum="queryData.pageNum"
        :defaultSort="{ field: 'numberOfSupportedProjects', order: 'desc' }"
        @page-change="handleCurrentChange"
        @sort-change="sortChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useNamespace } from 'vc/src/use';
import { useScreen } from './useScreen';
import { useTable } from './useTable';
import { getCarbonReduction } from '../apis';

const ns = /* hoist-static*/ useNamespace('carbonReduction');
defineOptions({ name: ns.b() });

const { queryData, tabs, changeTab, menus, traceSource } = useScreen();

const { totalNum, tableData, columns } = useTable(traceSource);

const { loading, run } = useRequest(getCarbonReduction, {
  defaultParams: [queryData],
  onSuccess: (res) => {
    totalNum.value = res.total;
    tableData.value = handleResData(res);
  }
});

const isPageChange = ref(false);
watch(
  () => queryData,
  (val) => {
    if (!isPageChange.value) {
      queryData.pageNum = 1;
    } else {
      isPageChange.value = false;
    }
    run && run(val);
  },
  { deep: true }
);

const handleCurrentChange = (page: number) => {
  queryData.pageNum = page;
  isPageChange.value = true;
};

const sortChange = (event: any) => {
  const { field, order } = event;
  queryData.indicatorFiled = field;
  queryData.indicatorOrder = order;
};

const handleResData = (res) => {
  let result: any[] = [];
  if (res?.values?.length) {
    const reportingPeriodTypes = {
      '1': '一季度',
      '2': '二季度',
      '3': '三季度',
      '4': '四季度',
      '5': '半年度',
      '6': '年度'
    };
    const valueTypes = {
      '1': '当季数据',
      '2': '本年数据',
      '3': '累计数据'
    };
    result = res.values.map((detail) => {
      return {
        companyId: detail?.carbonReductionCompanyVO?.companyId || '',
        companyName: detail?.carbonReductionCompanyVO?.companyName || '',
        companyShortName: detail?.carbonReductionCompanyVO?.companyShortName || '',
        statisticalYear: queryData.statisticalPeriod + '年',
        reportingPeriodTypeCode: reportingPeriodTypes[queryData.reportingPeriodTypeCode],
        valueTypeCode: valueTypes[queryData.valueTypeCode],
        numberOfSupportedProjects: detail?.indicatorInfo?.find((o) => o.indicator === '支持的项目数量')?.indicatorDisplayValue,
        numberOfSupportedProjectsObj: detail?.indicatorInfo?.find((o) => o.indicator === '支持的项目数量'),
        loanAmount: detail?.indicatorInfo?.find((o) => o.indicator === '贷款金额')?.indicatorDisplayValue,
        loanAmountObj: detail?.indicatorInfo?.find((o) => o.indicator === '贷款金额'),
        interestRate: detail?.indicatorInfo?.find((o) => o.indicator === '加权平均率')?.indicatorDisplayValue,
        interestRateObj: detail?.indicatorInfo?.find((o) => o.indicator === '加权平均率'),
        annualCERs: detail?.indicatorInfo?.find((o) => o.indicator === '带动年度碳减排量')?.indicatorDisplayValue,
        annualCERsObj: detail?.indicatorInfo?.find((o) => o.indicator === '带动年度碳减排量')
      };
    });
  }
  return result;
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
